<template>
  <div id="building">
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
     size="default" @submit.prevent>
     <el-row class="box" style="background-color: #cce2f6;">
       <el-col :span="24" class="grid-cell">
         <el-form-item label="账号" prop="userName" class="required label-center-align">
           <el-input :placeholder="$t('login.userName')" v-model="formData.userName" type="text" clearable></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="passWord" class="required label-center-align">
            <el-input :placeholder="$t('login.password')" v-model="formData.passWord" type="password" autocomplete="off" clearable/>
         </el-form-item>
         <el-form-item label="确认密码" prop="passwords" class="required label-center-align">
            <el-input :placeholder="$t('login.passwords')" v-model="formData.passwords" type="password" autocomplete="off" clearable/>
         </el-form-item>
         <el-form-item label="身份" prop="identity">
          <el-select v-model="formData.identity" class="required label-center-align" clearable>
            <el-option v-for="(item, index) in identityOptions" :key="index" :label="item.label"
              :value="item.value" v-model="formData.identity" :disabled="item.disabled"></el-option>
          </el-select>
         </el-form-item>
         <el-form-item label="手机号" prop="phone" class="required label-center-align">
           <el-input :placeholder="$t('login.phone')" v-model="formData.phone" type="text" clearable></el-input>
         </el-form-item>
         <el-form-item label="邮箱" prop="email" class="required label-center-align">
           <el-input :placeholder="$t('login.email')" v-model="formData.email" type="text" clearable></el-input>
         </el-form-item>
         <el-form-item label="验证码" prop="Captcha" class="captcha">
           <el-input :placeholder="$t('login.Captcha')" v-model="formData.Captcha" type="text" class="captcha" clearable></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="12" class="Captcha">
         <div>
           <el-button class="send" @click="send(formData.email,formData.emailCode)">发送验证码</el-button>
         </div>
       </el-col>
       <el-col :span="12" class="Register">
         <div>
           <el-button @click="register(formData.userName,formData.passWord,formData.identity,formData.phone,formData.email,formData.Captcha)">注册</el-button>
         </div>
       </el-col>
       <el-col :span="12" class="Cancel">
         <div>
           <el-button @click="login">取消</el-button>
         </div>
       </el-col>
     </el-row>
   </el-form>
  </div> 
 </template>
 
 <script>
   import {
     defineComponent,
     toRefs,
     reactive,
     getCurrentInstance
   }
   from 'vue'
   export default defineComponent({
     components: {},
     props: {},
     setup() {
      const validatePass2 = (rule, value, callback) => {
         if (value === '') {
            callback(new Error('Please input the password again'))
         } else if (value !== state.formData.passWord) {
            callback(new Error("Two inputs don't match!"))
         } else {
            callback()
         }
      }

       const state = reactive({
        verifyCode:"",
         formData: {
           userName: "",
           passWord: "",
           passwords: "",
           identity: 1,
           phone:"",
           email:"",
           Captcha:"",
         },
         rules: {
           userName: [{
             required: true,
             message: '请输入账号',
           }],
           passWord: [{
             required: true,
             message: '请输入密码',
           }, {
             pattern: /^[^一-龥]+$/,
             trigger: ['blur', 'change'],
             message: '密码不能有中文'
           }],
           passwords: [{
             required: true,
             message: '请输入密码',
           }, {
             pattern: /^[^一-龥]+$/,
             trigger: ['blur', 'change'],
             message: '密码不能有中文',
           },
           {
             trigger: ['blur', 'change'],
             message: '两次密码不一致',
             validator: validatePass2
           }],
           email: [{
            required: true,
            message: '请输入邮箱',
           }],
           Captcha:[{
            required: true,
            message: '请输入验证码',
           }],
         },
         identityOptions: [{
            "label": "学生",
            "value": 1
           }, 
           {
            "label": "老师",
            "value": 2
           }],
       })

       const instance = getCurrentInstance()
       const submitForm = () => {
         instance.proxy.$refs['vForm'].validate(valid => {
           if (!valid) return
           //TODO: 提交表单
         })
       }
       const resetForm = () => {
         instance.proxy.$refs['vForm'].resetFields()
       }
       
       return {
         ...toRefs(state),
         submitForm,
         resetForm,
       }
     },
     methods:{
        login(){
            this.$router.push({
               name:"login"
            });
        },
        register:function(userName,passWord,identity,phone,email,Captcha){
            var that = this;
            if(that.verifyCode===Captcha){
              var url ="/api/user/register";
              const that = this;
              $.ajax({
                  type: 'post',
                  async: false,
                  dataType : 'json',
                  url: url,
                  data: [
                      {name:"userName",value:userName},
                      {name:"passWord",value:passWord},
                      {name:"identity",value:identity},
                      {name:"phone",value:phone},
                      {name:"email",value:email},
                  ],
                  success: function (data) {
                      alert(JSON.stringify('注册成功'));
                      that.login();

                  },
                  error: function(msg){
                      console.error(msg);
                  }
              });
            }else{
              alert(JSON.stringify('验证码错误'));
            }
        },
        send(email){
          var url ="/api/user/sendemailregcode";
          var that = this;
            $.ajax({
              type: 'post',
              async: false,
              dataType : 'json',
              url: url,
              data: [
                  {name:"emailCode",value:email}
              ],
              success: function (data) {
                    alert(JSON.stringify('发送成功'));
                    that.verifyCode =data.code;
                    alert(JSON.stringify(that.verifyCode));
                },
                error: function(msg){
                    console.error(msg);
                }
          });
        }
      },
   })
   
   
 </script>
 
 <style lang="scss">
   .el-input-number.full-width-input,
   .el-cascader.full-width-input {
     width: 100% !important;
   }
   
   .el-form-item--medium {
     .el-radio {
       line-height: 36px !important;
     }
     
     .el-rate {
       margin-top: 8px;
     }
   }
   
   .el-form-item--small {
     .el-radio {
       line-height: 32px !important;
     }
     
     .el-rate {
       margin-top: 6px;
     }
   }
   
   .el-form-item--mini {
     .el-radio {
       line-height: 28px !important;
     }
     
     .el-rate {
       margin-top: 4px;
     }
   }
   
   .clear-fix:before,
   .clear-fix:after {
     display: table;
     content: "";
   }
   
   .clear-fix:after {
     clear: both;
   }
   
   .float-right {
     float: right;
   }
   
 </style>
 
 <style lang="scss" scoped>
 #building{
  background:url("../assets/tlg.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
   div.table-container {
     table.table-layout {
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
 
       td.table-cell {
         display: table-cell;
         height: 36px;
         border: 1px solid #e1e2e3;
       }
     }
   }
   
   div.tab-container {}
   
   .label-left-align :deep(.el-form-item__label) {
     text-align: left;
   }
   
   .label-center-align :deep(.el-form-item__label) {
     text-align: center;
   }
   
   .label-right-align :deep(.el-form-item__label) {
     text-align: right;
   }
   
   .custom-label {}
   
   .static-content-item {
     min-height: 20px;
     display: flex;
     align-items: center;
 
     :deep(.el-divider--horizontal) {
       margin: 0;
     }
   }
   .box{
    width: 394px;
    height: 460px;
    margin: 153px;
    padding: 25px;
    border: 1px solid #c2c0c0;
    margin-top: 120px;
    margin-left: 550px;
   }
   .Register{
      margin-left: -114px;
      max-width: 20%;
   }
   .Cancel{
      margin-left: 100px;
      max-width: 20%;
   }
   .captcha{
    width: 160px;
   }
   .send{
    margin-left: 200px;
    margin-top: -94px;
   }
 </style>